<template>
  <el-card class="login-card">
    <div class="login-title">欢迎登录</div>
    <el-tabs v-model="activeName" :stretch="true" class="loginTabs" @tab-click="handleClick">
      <el-tab-pane label="账号登录" name="loginDefault">
        <LoginDefault ref="loginDefaultRef" @submitForm="handleDefaultLogin" />
      </el-tab-pane>
      <el-tab-pane label="手机号登录" name="loginPhone">
        <LoginPhone ref="loginPhoneRef" @submitForm="handlePhoneLogin" />
      </el-tab-pane>
    </el-tabs>
    
    <el-row :gutter="10" class="action-buttons">
      <el-button 
        type="primary" 
        :loading="loading"
        @click="handleLogin"
        class="login-btn"
      >
        {{ loading ? '登录中...' : '登录' }}
      </el-button>
    </el-row>
    
    <el-row :gutter="10" class="action-buttons">
      <el-button type="info" @click="handleRegister" class="register-btn">
        注册账号
      </el-button>
    </el-row>
    
    <el-divider>其他登录方式</el-divider>
    <div class="social-login">
      <el-button circle class="social-btn wechat">
        <el-icon><ChatDotRound /></el-icon>
      </el-button>
      <el-button circle class="social-btn qq">
        <el-icon><Message /></el-icon>
      </el-button>
      <el-button circle class="social-btn weibo">
        <el-icon><Share /></el-icon>
      </el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts" name="loginForm">
import { ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance } from 'element-plus'
import { ChatDotRound, Message, Share } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'
import LoginDefault from '@/views/system/login/loginDefault.vue'
import LoginPhone from '@/views/system/login/loginPhone.vue'

const router = useRouter()
const userStore = useUserStore()
const activeName = ref('loginDefault')
const loading = ref(false)

// 表单引用
const loginDefaultRef = ref()
const loginPhoneRef = ref()

// 表单数据
let defaultLoginData = ref(null)
let phoneLoginData = ref(null)

const handleClick = () => {
  // 切换标签时清空数据
  defaultLoginData.value = null
  phoneLoginData.value = null
}

const handleDefaultLogin = (data: any) => {
  defaultLoginData.value = data
}

const handlePhoneLogin = (data: any) => {
  phoneLoginData.value = data
}

const handleLogin = async () => {
  try {
    loading.value = true
    
    let loginData = null
    
    if (activeName.value === 'loginDefault') {
      // 验证默认登录表单
      if (loginDefaultRef.value) {
        // const isValid = await loginDefaultRef.value.validateForm()
        // if (!isValid) {
        //   ElMessage.error('请完善登录信息')
        //   return
        // }
        loginData = defaultLoginData.value
      }
    } else {
      // 验证手机登录表单
      if (loginPhoneRef.value) {
        const isValid = await loginPhoneRef.value.validateForm()
        if (!isValid) {
          ElMessage.error('请完善登录信息')
          return
        }
        loginData = phoneLoginData.value
      }
    }
    
    // if (!loginData) {
    //   ElMessage.error('请填写登录信息')
    //   return
    // }
    
    // 调用登录接口
    // await userStore.userLogin(loginData)
    
    ElMessage({
      type: 'success',
      message: '登录成功',
    })
    
    // 登录成功后跳转
    // await userStore.afterLoginAction(true)
    router.push('/dashboard')
    
  } catch (error: any) {
    ElMessage({
      type: 'error',
      message: error.message || '登录失败，请重试',
    })
  } finally {
    loading.value = false
  }
}

const handleRegister = () => {
  ElMessage.info('注册功能开发中...')
}

const handleSocialLogin = (type: string) => {
  ElMessage.info(`${type}登录功能开发中...`)
}
</script>

<style scoped lang="less">
.login-card {
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);

  &:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

.action-buttons {
  margin-bottom: 15px;
}

.login-btn {
  width: 100%;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  
  &:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-1px);
  }
}

.register-btn {
  width: 100%;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;

  .social-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
    transition: all 0.3s ease;

    &.wechat {
      background: #07c160;
      border-color: #07c160;
      color: white;
      
      &:hover {
        background: #06ad56;
        border-color: #06ad56;
        transform: scale(1.1);
      }
    }

    &.qq {
      background: #12b7f5;
      border-color: #12b7f5;
      color: white;
      
      &:hover {
        background: #0fa3d9;
        border-color: #0fa3d9;
        transform: scale(1.1);
      }
    }

    &.weibo {
      background: #e6162d;
      border-color: #e6162d;
      color: white;
      
      &:hover {
        background: #c91426;
        border-color: #c91426;
        transform: scale(1.1);
      }
    }
  }
}

:deep(.el-card__body) {
  padding: 2rem 3rem;
  
  .login-title {
    width: 100%;
    height: auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #333;
    letter-spacing: 0.5rem;
    text-indent: 0.5rem;
  }
  
  .loginTabs {
    height: calc(16rem - 1rem);
    margin-bottom: 1rem;
  }
}

// 响应式设计
@media (max-width: 768px) {
  :deep(.el-card__body) {
    padding: 1.5rem 2rem;
    
    .login-title {
      font-size: 1.5rem;
      letter-spacing: 0.3rem;
      text-indent: 0.3rem;
    }
  }
  
  .social-login {
    gap: 15px;
    
    .social-btn {
      width: 45px;
      height: 45px;
      font-size: 18px;
    }
  }
}
</style>
